<template>
  <div>
    <el-dialog
      title="删除报表"
      v-model="state.isShow"
      lock-scroll
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      draggable
      align-center
      width="400px"
      @closed="closed"
    >
      <ul>
        <li class="flex items-center bg-[#e5f1f5] border rounded-[6px]">
          <div class="w-[100px] pl-2">选择日期</div>
          <div class="flex-1 w-0">
            <el-date-picker
              class="!w-full"
              v-model="form.date"
              type="date"
              placeholder="请选择选择日期"
            />
          </div>
        </li>
        <li class="flex items-center bg-[#e5f1f5] border rounded-[6px] mt-[10px]">
          <div class="w-[100px] pl-2">房主密码</div>
          <div class="flex-1 w-0">
            <el-input v-model="form.password" placeholder="请输入密码"></el-input>
          </div>
        </li>
      </ul>
      <template #footer>
        <el-button @click="closed">取 消</el-button>
        <el-button
          :disabled="state.updating"
          :loading="state.updating"
          type="primary"
          @click="confirm"
          >确 定</el-button
        >
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { reqAgentRebateDel } from "@/api/report";
import { message } from "@/utils/message";
import { debounce } from "lodash-es";
import moment from "moment";

const emit = defineEmits(["update"]);
const state = reactive({
  isShow: false,
  updating: false
});
const form = reactive({
  date: "",
  password: ""
});
const closed = () => {
  form.date = "";
  form.password = "";
  state.isShow = false;
};
const open = () => {
  state.isShow = true;
};

const confirm = debounce(
  async () => {
    if (!form.date) {
      message.warning("请选择日期");
      return false;
    }
    if (!form.password) {
      message.warning("请输入密码");
      return false;
    }
    state.updating = true;
    try {
      await reqAgentRebateDel({
        Password: form.password,
        Date: moment(form.date).format("YYYY-MM-DD")
      });
      state.updating = false;
      emit("update");
      message.success("删除报表成功");
      setTimeout(() => {
        closed();
      }, 200);
    } catch (error) {
      state.updating = false;
      console.log(error);
    }
  },
  500,
  { leading: true, trailing: false }
);

defineExpose({
  open
});
</script>
<style scoped lang="scss">
:deep(.el-dialog__body) {
  padding: 20px;
}
</style>
